<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>购物系统-登录页面</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.css}" rel="stylesheet">
    <style>
        /* 搜索栏 */
        .ms-nav-search{
            text-align: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        /* 搜索栏输入框 */
        .ms-nav-search input{
            width: 500px;
            height: 40px;
            font-size: 20px;
            border: black solid 1px;

            transition-duration: 0.5s;
        }
        .ms-nav-search input:focus{
            border-color: #c7e4c7;
        }
        /* 搜索栏按钮 */
        .ms-nav-search button{
            padding: 8px;
            border-radius: 5%;
            width: 100px;
            transition-duration: 0.5s;
        }
        .ms-nav-search button:hover{
            background: rgba(201, 220, 216, 1);
            transform: scale(1.1);
        }

        /* 固定图片的长和宽 */
        .carousel-item img{
            width: 400px;
            height: 500px;
            border-radius: 10px;
        }

        /* 无序列表适当间距 */
        .ms-ul li{
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<nav th:replace="common/topbar.html"></nav>
<div th:replace="common/ms-toast.html"></div>

<div class="container">
    <div class="col-md-3">

    </div>

    <div class="col-md-6 mx-auto shadow p-5 mt-2">
        <h1 class="text-center placeholder">登录页面</h1>
        <form id="ms-form-login">
            <ul class="ms-ul list-unstyled">
                <!-- 1 用户账号 -->
                <li>
                    <div class="form-floating">
                        <input name="usercode" type="text" class="form-control placeholder" id="ms-form-login-code" placeholder="账号">
                        <label for="ms-form-login-code">账号</label>
                        <div class="valid-feedback">
                            提示: 账号是存在的!
                        </div>
                        <div id="ms-form-login-check-code-fail" class="invalid-feedback">
                            提示: 账号必须存在
                        </div>
                    </div>  </li>
                <!-- 2 用户密码 -->
                <li>
                    <div class="form-floating">
                        <input name="password" type="password" class="form-control placeholder" id="ms-form-login-password" placeholder="Password">
                        <label for="ms-form-login-password">密码</label>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-login-check-password-fail" class="invalid-feedback">
                            提示: 密码不能为空
                        </div>
                    </div>
                </li>


                <!-- 3 验证码 -->
                <li>
                    <div class="container-fluid row">
                        <div class="col-md-5">
                            <a href="#" id="ms-captcha-changeImg">
                                <canvas class="show-captcha" id="ms-captcha-canvas" width="150" height="50"></canvas>
                            </a>
                        </div>
                        <div class="col-md-7">
                            <div class="form-floating">
                                <input type="text" class="form-control placeholder" id="ms-form-login-captcha" placeholder="Password">
                                <label for="ms-form-login-captcha">验证码</label>
                                <div class="valid-feedback">
                                    提示: 验证码正确!
                                </div>
                                <div id="ms-form-login-captcha-fail" class="invalid-feedback">
                                    提示: 验证码输入错误
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

                <!-- 注册按钮 -->
                <li class="text-center">
                    <label for="autoLogin">三天内自动登录</label>
                    <input id="autoLogin" type="checkbox" class="checkbox" name="remember" value="1">
                    <button id="ms-btn-login" class="ms-keydown_enter btn btn-primary w-50 placeholder" type="button" onclick="ms_login('ms-btn-login')">
                        登录
                    </button>
                </li>
            </ul>
        </form>
    </div>
    <div class="col-md-3"></div>
</div>
<!-- 引入第三方 JS 脚本文件 -->
<script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
<script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.bundle.js}" type="text/javascript"></script>
<!-- 引入自定义的 JS 脚本文件 -->
<script th:src="@{/js/common/ms-config.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-toast.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-random.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-captcha.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-btn.js}" type="text/javascript"></script>
<script th:src="@{/js/user/ms-login.js}" type="text/javascript"></script>

</body>
</html>